import React, { Component } from 'react';
import CaseStore from '../../stores/CaseStore';
import { RouterStore } from 'mobx-react-router';
import { inject, observer } from 'mobx-react';
import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';

import './KPIRank.scss';

interface KPIProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const KPIRankColumns = [
    {
        dataIndex: 'title',
        key: 'title',
        width: 100,
        render: (text: string, record: string, index: number) => {
            return <div className="table-text">{text}</div>;
        }
    },
    {
        dataIndex: 'info',
        key: 'info',
        render: (text: string, record: string, index: number) => {
            return <div className="table-text">{text}</div>;
        }
    }
];

@inject('caseStore', 'routingStore')
@observer
export default class KPIRank extends Component<KPIProps> {
    componentWillMount() {
        const { caseStore } = this.props;
        caseStore.getKPIRank();
    }
    render(): JSX.Element {
        const { caseStore, routingStore } = this.props;
        const title = caseStore.CaseListCategory;
        const dataTable = caseStore.KPIRank;
        return (
            <div className="page-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                >
                    {title}
                </NavBar>
                <Table
                    className="kpi-table"
                    dataSource={dataTable}
                    columns={KPIRankColumns}
                    bordered={true}
                    pagination={false}
                    showHeader={false}
                />
            </div >
        );
    }
}